<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import ChildCom from '@/components/propsAbout/ChildCom.vue'
import WaterFall from '@/components/propsAbout/WaterFall.vue'
import DeepTree from '@/components/propsAbout/DeepTree.vue'
import ComplexValtable from '@/components/propsAbout/ComplexValtable.vue'

const user = reactive({ name: 'xl' })
const sonData = ref('')
const title = ref('123')
//子传给父的事件
const sendTop = (childData: string) => {
  sonData.value = childData
}
//父级改变传给子的数据
const chaneName = () => {
  user.name = new Date().toLocaleString('en-US')
  title.value = user.name
}

//实现父子组件传值双向绑定
const isShow = ref(false)

//直接获取子组件
const ChildComRefs = ref<InstanceType<typeof ChildCom>>()
console.log(ChildComRefs.value?.exposeData, '>>>>子组件expose抛出的值')
onMounted(() => {
  console.log(ChildComRefs.value?.exposeData, '>>>>子组件expose抛出的值')
})

type List = Array<{ color: string; height: number; top?: number; left?: number }>

//瀑布流数组
const list: List = [
  { color: 'yellow', height: 100 },
  { color: 'red', height: 50 },
  { color: 'blue', height: 80 },
  { color: 'orange', height: 130 },
  { color: 'pink', height: 60 },
  { color: 'yellow', height: 80 },
  { color: 'red', height: 50 },
  { color: 'blue', height: 80 },
  { color: 'orange', height: 130 },
  { color: 'pink', height: 60 },
  { color: 'yellow', height: 100 },
  { color: 'red', height: 50 },
  { color: 'blue', height: 80 },
  { color: 'orange', height: 130 },
  { color: 'pink', height: 60 },
  { color: 'black', height: 40 },
  { color: 'purple', height: 90 },
  { color: 'green', height: 75 },
  { color: 'black', height: 40 },
  { color: 'purple', height: 90 },
  { color: 'green', height: 75 },
  { color: 'black', height: 40 },
  { color: 'purple', height: 90 },
  { color: 'green', height: 75 },
]
//递归Tree
interface Tree {
  key: string | number
  name: string
  children?: Tree[]
}
const tree: Tree[] = [
  {
    key: '1',
    name: '1',
    children: [
      {
        key: '1-1',
        name: '1-1',
        children: [{ key: '1-1-1', name: '1-1-1' }],
      },
    ],
  },
  {
    key: '2',
    name: '2',
    children: [
      {
        key: '2-1',
        name: '2-1',
      },
    ],
  },
]
const ChildComRefs2 = ref<InstanceType<typeof ChildCom>>()
</script>

<template>
  <div class="wl-pbox">
    <ChildCom
      ref="ChildComRefs"
      :user="user"
      :title="title"
      @sendTop="sendTop"
      v-model:isShow="isShow"
      v-model:isHide="isShow"
    ></ChildCom>
    <label for="user">父级改userInfo:<input type="text" id="user" @change="chaneName" /></label>
    <div>子级改变之后的值:{{ sonData }}</div>
    <span>父级绑定的值isShow：{{ isShow }}</span>
    <label for="">父级控制的checked：</label><input type="checkbox" v-model="isShow" />
    <ComplexValtable></ComplexValtable>
    <water-fall :list="list"></water-fall>
    <DeepTree :tree="tree"></DeepTree>
  </div>
</template>

<style scoped lang="scss">
// @include b('pbox') {
// }
</style>
